<template>
  <div class="block">
    <el-date-picker
      v-model="value1"
      type="daterange"
      value-format="yyyy-MM-dd"
      range-separator="至"
      @change="timeDate"
      start-placeholder="开始日期"
      end-placeholder="结束日期">
    </el-date-picker>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        value1: new Date(),
        timeDefaultShow:''
      };
    },
    created(){
      },
    mounted() {
        this.value1 = this.timeDefault;
       
      // this.aaa()
    },
    computed: {
        // 默认时间
        timeDefault () {
            let date = new Date()
            // 通过时间戳计算
            let defalutStartTime = date.getTime() - 7 * 24 * 3600 * 1000 // 转化为时间戳
            let defalutEndTime = date.getTime()
            let startDateNs = new Date(defalutStartTime) 
            let endDateNs = new Date(defalutEndTime)
            // 月，日 不够10补0
            defalutStartTime = startDateNs.getFullYear() + '-' + ((startDateNs.getMonth() + 1) >= 10 ? (startDateNs.getMonth() + 1) : '0' + (startDateNs.getMonth() + 1)) + '-' + (startDateNs.getDate() >= 10 ? startDateNs.getDate() : '0' + startDateNs.getDate())
            defalutEndTime = endDateNs.getFullYear() + '-' + ((endDateNs.getMonth() + 1) >= 10 ? (endDateNs.getMonth() + 1) : '0' + (endDateNs.getMonth() + 1)) + '-' + (endDateNs.getDate() >= 10 ? endDateNs.getDate() : '0' + endDateNs.getDate())
            return [defalutStartTime, defalutEndTime]
        }
    },
    methods: {
        timeDate(){
          this.$emit("changeTime",this.value1)
         
            //console.log(this.value1)
        }
    },
  };    
</script>
<style lang="less" scoped>
    .el-range-editor.el-input__inner{
        background-color: rgb(13, 52, 91);
    }
/deep/ .el-range-editor .el-range-input{
        background-color: rgb(13, 52, 91);
        color: #fff;
        font-size: 0.56vw;
    }
    /deep/ .el-range-input{
        color: #fff;
        font-size: 0.56vw;
    }
    /deep/ .el-date-editor .el-range-separator{
        color: #fff;
        font-size: 0.56vw;
        line-height: 2vh;
        height: auto;
    }
    .el-date-editor.el-input, .el-date-editor.el-input__inner{
        width: 10vw;
        height: 2vh;
    }
    .el-input__inner{
        border: 1px solid rgb(52, 161, 255);
    }
   /deep/ .el-date-editor .el-range__icon{
        line-height: 15px;
    }
    /deep/ .el-date-editor .el-range__close-icon{
        line-height: 15px;
    }
</style>